<template>
  <div class="sidebar">
    <!-- 城市导航部分 开始 -->
    <div class="sidebar_nav">
      <div class="sidebar_nav_city" @mouseleave="hideCity">
        <!-- 菜单列表城市 开始 -->
        <div
          class="recommend_city"
          v-for="(item,index) in data"
          :key="index"
          @mouseenter="getHotCities(index)"
        >
          <div class="menu_item" :class="index==showIndex?'active':''">
            <div class="city_title">{{item.type}}</div>
            <div class="jiantou" :class="index==showIndex?'jiantouActive':''"></div>
          </div>
        </div>
        <!-- 菜单列表城市内容 开始 -->
        <div class="menu_city_list" v-if="isShow" @mouseleave="hideSidebarStyle">
          <div class="line"></div>
          <div
            class="recommend_content_list"
            v-for="(item2,index2) in data[total].children"
            :key="index2"
          >
            <div class="number">{{index2 + 1}}</div>
            <div class="city" @click="menuCity(item2.city)">{{item2.city}}</div>
            <div class="content" @click="menuCity(item2.city)">{{item2.desc}}</div>
          </div>
        </div>
        <!-- 菜单列表城市内容 结束 -->
        <!-- 菜单列表城市 结束 -->
      </div>
    </div>
    <!-- 城市导航部分 开始 -->

    
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false, // 二级菜单的显示与隐藏
      data: [], // 获取到的菜单数据
      total: null, // 一级菜单的索引与总条数
      showIndex: -1, // 索引   
    };
  },
  methods: {
    // 菜单列表城市
    menuCity(city) {
      // console.log(city)
      this.$emit("menuListCity", city);
    },
    // 鼠标移入
    getHotCities(index) {
      this.isShow = true;
      this.total = index;
      this.showIndex = index;
      console.log("鼠标移入recommend_city showIndex:" + this.showIndex);
    },
    // 鼠标移出
    hideCity() {
      this.isShow = false;
      this.showIndex = -1;
    },
    // 隐藏sidebar的样式
    hideSidebarStyle() {
      this.showIndex = -1;
    },
  },
  mounted() {
    // 发送 axios 获取侧边栏菜单数据
    this.$axios({
      url: "/posts/cities",
      method: "get",
    }).then((res) => {
      const { data } = res.data;
      // console.log(data);
      this.data = data;
    });
  },
};
</script>

<style lang="less" scoped>
.sidebar {
  // 城市的导航部分样式 开始
  .sidebar_nav {
    margin-bottom: 20px;
    .sidebar_nav_city {
      position: relative;

      // 菜单城市列表
      .recommend_city {
        cursor: pointer;
        border: 1px solid #dddddd;
        border-right: none;
        border-top: none;

        .menu_item {
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          border-right: 1px solid #ddd;
          position: relative;
          z-index: 999;

          &:hover {
            color: #ffa500;
            border-right: none;
          }
          &:hover .jiantou {
            border-right: 1px solid #ffa500;
            border-top: 1px solid #ffa500;
          }
          .city_title {
            font-size: 14px;
          }
          .jiantou {
            width: 10px;
            height: 10px;
            border: 1px solid #9e9e9e;
            transform: rotate(45deg);
            border-left: none;
            border-bottom: none;
          }
        }
        .active {
          color: #ffa500;
          border-right: none;
        }
        .jiantouActive {
          border-color: #ffa500 !important;
        }
        &:nth-child(1) {
          border-top: 1px solid #ddd;
        }
      }
      // 菜单城市列表内容
      .menu_city_list {
        width: 340px;
        padding: 10px 10px 10px 20px;
        border: 1px solid #e6e6e6;
        border-left: none;
        position: absolute;
        top: 0;
        left: 259px;
        background-color: #fff;
        z-index: 99;
        .recommend_content_list {
          cursor: pointer;
          height: 36px;
          display: flex;
          align-items: center;
          color: #ffb535;
          .number {
            font-size: 26px;
            font-weight: 400;
            font-style: italic;
          }
          .city {
            font-size: 14px;
            margin: 0 15px;
            &:hover {
              text-decoration: underline;
            }
          }
          .content {
            font-size: 14px;
            color: #999;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .line {
          width: 1px;
          height: 37px;
          background-color: #e6e6e6;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  // 城市的导航部分样式 结束
}
</style>